<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本溢出隐藏，省略号替代</title>
    <style>
        div {
             width: 180px;
             height: 45px;
             background-color: pink;
             margin: 100px auto;
             /* 1:溢出部分隐藏 */
             overflow: hidden;
             /* 2：隐藏文本用省略号替代 */
            text-overflow: ellipsis;
            /* 3：设置为弹性伸缩盒子 */
            display: -webkit-box;
            /* 4：设置一个块元素显示文本的行数。这里行数根据实际情况更改即可 */
            -webkit-line-clamp: 2;
            /* 5：让这个弹性盒子进行对齐排列 */
            -webkit-box-orient: vertical;
            /* 这个盒子的高度要严格控制的 不然省略号后面还会有字 更推荐后台人员来做 他们做更简单 */
        }
    </style>
</head>
<body>
    <div>
        省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
    </div>
</body>
</html>